<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><!--引入jquery-->
<link href="fourth_page.css" rel="stylesheet" type="text/css" />

  </head>
  <body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">学籍信息查询</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="main_page.html">信息检索</a></li>
            <li><a href="sec_page.html">新增学生信息</a></li>
            <li ><a href="third_page.html">选课名单/改分</a></li>
            <li class="active" ><a href="fourth_page.html">课程查询/选课</a></li>
            <li><a href="fifth_page.html">成绩信息</a></li>
            <li><a href="sixth_page.html">新增课程信息</a></li>
          <!--   <li class="dropdown">
              <a href="fifth_page.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li> -->
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
<!--/.nav part accomplished -->  
<div class="main-container">
  <div class="row">
    <div id="container-left" class="col-sm-3"  >
      <br>
      <br>
      <h3>查询索引</h3>
      <form>  
      Course Name<input type="text" class="form-control" id="cname" placeholder="请输入课程名称">
      Course ID<input type="text" class="form-control" id="cid" placeholder="请输入课程编号"> 
      <br>
      <button id="SearchSubmit" type="button" class="btn btn-info">搜索</button>
     
      </form>
    </div>
    <div class="col-sm-9" id="container-right" >
      <div>
      <br>
      <br>
      <h3>课程信息</h3>
      <table id="table_student_info" class="table table-striped table-hover">
      <tr>
      <th>课程编号</th>
      <th>课程名称</th>
      <th>教课教师姓名</th>
      <th>学分</th>
      <th>课程适合年级</th>
      <th>取消年份</th>
      <th></th>
      </tr>
      </table>
      </div>

      <div class="col-sm-3">
      </div>
      <div id="change_course_select_info" class="container-right-change col-sm-6" data-key="">
         学号<input class="form-control input-sm-2" id="sid" type="text" placeholder="Students ID">
         <button id="ChangeSubmit" type="button" class="btn btn-info">修改</button>
      </div>
      <div class="col-sm-3"></div>
      <div class="col-sm-12">
      <h3>选课名单</h3>
      <table id="table_course_students_info" class="table table-striped table-hover">
      <tr>
      <th>姓名</th>
      <th>学号</th>
      <th>性别</th>
      <th>入学年龄</th>
      <th>入学年份</th>
      <th>成绩</th>
      <th></th>
      </tr>
      </table>
    </div>
    </div>
</div>

<script src="fourth_page.js"></script>

  
  </body>
</html>